<!DOCTYPE HTML>
<html>
<head>
  <title>CSS Variables Allowed Syntax</title>
  <link rel="author" title="L. David Baron" href="http://dbaron.org/">
  <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
  <link rel="help" href="http://www.w3.org/TR/css3-transitions/#animatable-types">
  <!-- also see https://www.w3.org/Bugs/Public/show_bug.cgi?id=14605 -->
  <script src="/resources/testharness.js"></script>
  <script src="/resources/testharnessreport.js"></script>
<style id="style"></style>
<script id="metadata_cache"></script>
</head>
<body onload="run()">
<div id=log></div>
<div id="test"></div>
<script>

test(function() {
       var div = document.getElementById("test");
       var cs = getComputedStyle(div, "");
       div.style.color = "red";
       div.style.backgroundColor = "currentcolor";
       var force_flush = cs.backgroundColor;
       div.style.transition = "background-color linear 50s -10s";
       div.style.color = "blue";
       var quarter_interpolated = cs.backgroundColor;
       div.style.transition = "";
       div.style.backgroundColor = "rgb(204, 0, 51)";
       var quarter_reference = cs.backgroundColor;
       div.style.backgroundColor = "blue";
       var final_reference = cs.backgroundColor;
       assert_true(quarter_interpolated != quarter_reference &&
                   quarter_interpolated == final_reference);
     },
     "currentcolortransition",
     { assert: "Transition does not occur when the value is currentColor and color changes" });

</script>
</body>
</html>
